<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="common/htmlHead :: common_header(~{::title})">
    <title>患者修改个人信息</title>
    <meta http-equiv="content-type" charset="UTF-8">
</head>
<body>

    <!-- 侧边栏  -->
    <head th:replace="~{common/sidebar}">

        <!-- Page Content  -->
        <div id="content-page" class="content-page">

            <!-- 导航栏 -->
            <div class="iq-top-navbar header-top-sticky">
                <div class="iq-navbar-custom">
                    <div class="iq-sidebar-logo">
                        <div class="top-logo">
                            <a href="index.html" class="logo">
                                <img src="images/logo.png" class="img-fluid" alt="">
                                <span>Shiqi</span>
                            </a>
                        </div>
                    </div>
                    <nav class="navbar navbar-expand-lg navbar-light p-0">
                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <i class="ri-menu-3-line"></i>
                        </button>
                        <div class="iq-menu-bt align-self-center">
                            <div class="wrapper-menu">
                                <div class="main-circle"><i class="ri-more-fill"></i></div>
                                <div class="hover-circle"><i class="ri-more-2-fill"></i></div>
                            </div>
                        </div>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav ml-auto navbar-list">
                                <li class="nav-item">
                                    <a class="search-toggle iq-waves-effect language-title" th:text="#{main.language}">
                                        语言 <i class="ri-arrow-down-s-line"></i></a>
                                    <div class="iq-sub-dropdown">
                                        <a class="iq-sub-card" th:href="@{/getUserInfo(l='zh_CN')}">
                                            <img th:src="@{/images/small/ch.png}" alt="img-flaf" class="img-fluid mr-2">
                                            简体中文
                                        </a>
                                        <a class="iq-sub-card" th:href="@{/getUserInfo(l='en_US')}">
                                            <img th:src="@{/images/small/en.png}" alt="img-flaf" class="img-fluid mr-2">
                                            English
                                        </a>
                                    </div>
                                </li>
                                <li class="nav-item iq-full-screen">
                                    <a href="#" class="iq-waves-effect" id="btnFullscreen"><i
                                            class="ri-fullscreen-line"></i></a>
                                </li>
                            </ul>
                        </div>
                        <ul class="navbar-list">
                            <li>
                                <a href="#" class="search-toggle iq-waves-effect d-flex align-items-center">
                                    <img src="images/user/1.jpg" class="img-fluid rounded mr-3" alt="user">
                                    <div class="caption">
                                        <h6 class="mb-0 line-height">[[${session.loginUser}]]</h6>
                                        <span class="font-size-12" th:text="#{main.Available}">Available</span>
                                    </div>
                                </a>
                                <div class="iq-sub-dropdown iq-user-dropdown">
                                    <div class="iq-card shadow-none m-0">
                                        <div class="iq-card-body p-0 ">
                                            <div class="bg-primary p-3">
                                                <h5 class="mb-0 text-white line-height"><span th:text="#{main.Hello}">Hello</span>
                                                    [[${session.loginUser}]]</h5>
                                                <span class="text-white font-size-12" th:text="#{main.Available}">Available</span>
                                            </div>
                                            <!--修改个人信息-->
                                            <a th:href="@{/topro-edit}" class="iq-sub-card iq-bg-primary-hover">
                                                <div class="media align-items-center">
                                                    <div class="rounded iq-card-icon iq-bg-primary">
                                                        <i class="ri-profile-line"></i>
                                                    </div>
                                                    <div class="media-body ml-3">
                                                        <h6 class="mb-0 " th:text="#{main.upMyInfo}">Edit Profile</h6>
                                                        <p class="mb-0 font-size-12" th:text="#{main.upMyInfoDes}">
                                                            Modify your personal details.</p>
                                                    </div>
                                                </div>
                                            </a>
                                            <!--注销-->
                                            <div class="d-inline-block w-100 text-center p-3">
                                                <a class="bg-primary iq-sign-btn" th:href="@{/logout}"
                                                   role="button">注销<i class="ri-login-box-line ml-2"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </nav>

                </div>
            </div>
            <!-- 导航栏结束 -->

            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="iq-card">
                            <div class="iq-card-body p-0">
                                <div class="iq-edit-list">
                                    <ul class="iq-edit-profile d-flex nav nav-pills">
                                        <li class="col-md-3 p-0">
                                            <a th:text="#{main.PersonalInformation}" class="nav-link active"
                                               data-toggle="pill" href="#personal-information">
                                                Personal Information
                                            </a>
                                        </li>
                                        <li class="col-md-3 p-0">
                                            <a th:text="#{main.ChangePassword}" class="nav-link" data-toggle="pill"
                                               href="#chang-pwd">
                                                Change Password
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="iq-edit-list-data">
                            <div class="tab-content">
                                <!--个人信息页-->
                                <div class="tab-pane fade active show" id="personal-information" role="tabpanel">
                                    <div class="iq-card">
                                        <div class="iq-card-header d-flex justify-content-between">
                                            <div class="iq-header-title">
                                                <h4 class="card-title" th:text="#{mian.PersonalInformation}">Personal
                                                    Information</h4>
                                            </div>
                                        </div>
                                        <div class="iq-card-body">
                                            <form th:action="@{/updateUserInfo}">
                                                <!--邮箱隐藏域-->
                                                <input th:value="${session.Email}" name="Email" type="hidden">

                                                <div class="form-group row align-items-center">
                                                    <div class="col-md-12">
                                                        <div class="profile-img-edit">
                                                            <img class="profile-pic" src="images/user/11.png"
                                                                 alt="profile-pic">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class=" row align-items-center">
                                                    <div class="form-group col-sm-6">
                                                        <label th:text="#{main.UserName}">User Name:</label>
                                                        <input type="text" class="form-control"
                                                               th:value="${session.loginUser}" name="Username">
                                                    </div>
                                                    <div class="form-group col-sm-6">
                                                        <label class="d-block" th:text="#{main.Gender}">Gender:</label>
                                                        <div class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" id="customRadio6" th:name="Gender"
                                                                   class="custom-control-input"
                                                                   th:checked="${session.UserInfo.getGender()=='男'}"
                                                                   value="男"
                                                                   checked="">
                                                            <label class="custom-control-label" for="customRadio6"
                                                                   th:text="#{main.Male}">
                                                                Male </label>
                                                        </div>
                                                        <div class="custom-control custom-radio custom-control-inline">
                                                            <input type="radio" id="customRadio7" th:name="Gender"
                                                                   class="custom-control-input"
                                                                   th:checked="${session.UserInfo.getGender()=='女'}"
                                                                   value="女">
                                                            <label class="custom-control-label" for="customRadio7"
                                                                   th:text="#{main.Female}">
                                                                Female </label>
                                                        </div>
                                                    </div>
                                                    <div class="form-group col-sm-6">
                                                        <label for="dob" th:text="#{main.Birth}">Date Of Birth:</label>
                                                        <input type="text" class="form-control" id="dob"
                                                               th:value="${session.UserInfo.getBirth()}"
                                                               placeholder="yyyy-MM-dd" name="Birth">
                                                    </div>

                                                    <div class="form-group col-sm-6">
                                                        <label th:text="#{main.Country}">Country:</label>
                                                        <input type="text" class="form-control"
                                                               th:value="${session.UserInfo.getCountry()}"
                                                               name="Country">
                                                    </div>
                                                    <div class="form-group col-sm-12">
                                                        <label th:text="#{main.Address}">Address:</label>

                                                        <textarea class="form-control" rows="5"
                                                                  style="line-height: 22px"
                                                                  th:text="${session.UserInfo.getAddress()}"
                                                                  name="Address">
                                                        </textarea>
                                                    </div>
                                                </div>
                                                <button type="submit" class="btn btn-primary mr-2" id="sub"
                                                        th:text="#{main.Submit}">Submit
                                                </button>
                                                <button type="reset" class="btn iq-bg-danger" th:text="#{main.cancel}">
                                                    cancel
                                                </button>
                                                <h4 th:text="${msg}" id="msg"
                                                    style="color: #0abb78 ;margin-left: 200px; display: inline-block"></h4>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <!--修改密码-->
                                <div class="tab-pane fade" id="chang-pwd" role="tabpanel">
                                    <div class="iq-card">
                                        <div class="iq-card-header d-flex justify-content-between">
                                            <div class="iq-header-title">
                                                <h4 class="card-title" th:text="#{main.ChangePassword}">Change
                                                    Password</h4>
                                            </div>
                                        </div>
                                        <div class="iq-card-body">
                                            <form th:action="@{/upPw}">
                                                <input th:value="${session.Email}" name="Email" type="hidden">
                                                <div class="form-group">
                                                    <label for="cpass" th:text="#{main.NewPassword}">Current
                                                        Password:</label>
                                                    <a th:href="@{/torecoverpw}" class="float-right"
                                                       th:text="#{main.ForgotPassword}">Forgot Password</a>
                                                    <input type="Password" class="form-control" id="cpass"
                                                           name="Password" value="" required>
                                                </div>
                                                <button type="submit" class="btn btn-primary mr-2"
                                                        th:text="#{main.Submit}">Submit
                                                </button>
                                                <button type="reset" class="btn iq-bg-danger" th:text="#{main.cancel}">
                                                    cancel
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 脚部 -->
            <footer th:replace="~{common/footer}"></footer>
            <!-- 脚部结束 -->
        </div>


    </head>
</div>

<!-- Wrapper END -->
<!--使用公有js-->
<div th:replace="common/htmlHead::common_js(~{::script})">

</div>
<!--<script>
    var msg=document.querySelector("#msg");

    var sub=document.querySelector("#sub");
    sub.addEventListener('click',function () {
        alert(msg.innerHTML);
    })
</script>-->
</body>
</html>
